.segment-container {
  width: 120px;
  height: 120px;
  border-radius: 20px;
  text-align: center;
  background-color: #4E627E;
  position: relative;
  display: inline-block;

  & .icon-ios {
    &:before {
      content: "\e66b";
    }
  }
  & .icon-android {
    &:before {
      color: #99CC01;
      content: "\e66c";
    }
  }

  & .iconfont {
    line-height: 120px;
    font-size: 55px;
  }

  .segmentBase () {
    font-size: 12px;
    position: absolute;
    right: 0px;
    top: 0px;
    height: 57px;
    width: 57px;
  }

  @ios-corner-icon-white: url();
  @android-corner-icon-white: url();
  @ios-corner-icon-dark: url();
  @android-corner-icon-dark: url();

  & .corner-icon-ios {
    .segmentBase;
    background-image: @ios-corner-icon-dark;
  }

  & .corner-icon-android {
    .segmentBase;
    background-image: @android-corner-icon-dark;
  }

  & .corner-desc {
    font-family: 'Arial Normal', 'Arial';
    font-size: 12px;
    letter-spacing: 1.2px;
    color: #F3F6F9;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    right: 5px;
    top: 13.5px;
  }

  &:hover {
    background-color: #47566B;

    & .iconfont {
      background-color: #47566B;
    }
  }

  &.selected {
    background-color: #FFFFFF;

    & .icon-ios {
      &:before {
        color: #9A9A9A;
      }
    }

    & .corner-icon-ios {
      background-image: @ios-corner-icon-white;
    }

    & .corner-icon-android {
      background-image: @android-corner-icon-white;
    }

    &:hover {
      background-color: #FFFFFF;

      & .iconfont {
        background-color: #FFFFFF;
      }
    }
  }
}
